<template>
  <div>
    <h2>html2pdf</h2>
    <button @click="downloadToPDF">Download to PDF</button>
    
    <div style="height: 500px; overflow: auto;">
      <div class="content" id="element-to-print" ref="document">
        <img src="@/assets/logo.png" alt="">
        <img src="@/assets/1.jpg" alt=""> 
      </div>
    </div>

  </div>
</template>

<script setup lang="">
import { defineComponent, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
import html2pdf from 'html2pdf.js';

function downloadToPDF() {
  const element = document.getElementById("element-to-print");
  const opt = {
      margin: 1,
      filename: "myfile.pdf",
      image: { type: "jpeg", quality: 1 },
      html2canvas: { scale: 3 },
      jsPDF: {
        unit: "in",
        format: "letter",
        orientation: "portrait",
      },
  };
  html2pdf().set(opt).from(element).save().then(()=>{
    console.log( 'success' );
  }).catch((err) => {
    console.log( 'err' );
  });
}
</script>

<style lang="scss" scoped>
.content{
  width: 500px;
  background: #ededed;
  img {
    width: 100%;
  }
}
</style>